<template>
  <div class="index">
    <!-- 头部标题 -->
    <van-nav-bar fixed title="首页" />
    <div class="box">
      <!-- 频道区域 -->
      <van-tabs v-model="active">
        <van-tab v-for="(item, index) in channelsList" :key="index" :title="item.name">
          <!-- 文章区域结构 -->
          <!-- v-model: 组件是否刷新完成 true:刷新完成 false：刷新未完成 -->
          <!-- refresh: 下拉刷新时执行的事件 -->
          <van-pull-refresh v-model="item.isLoading" @refresh="onRefresh">
            <!-- load：上拉触底时执行的函数 -->
            <!-- v-model: list 组件的加载状态 true：正在加载其它数据 false：数据加载完毕 -->
            <!-- finished：完结状态 true：说明所有的数据源加载完毕 false：还未加载完毕 -->
            <van-list v-model="item.loading" :finished="item.finished" finished-text="没有更多了" @load="onLoad">
              <!-- 完成一个基本的文章数据结构 -->
              <van-cell @click="$router.push('detail?artid=' + subitem.art_id)" border v-for="(subitem, subindex) in item.articleList" :key="subindex">
                <template #title>
                  <!-- 标题 -->
                  <h3>{{ subitem.title }}</h3>
                  <!-- 文章图片 -->
                  <van-grid v-if="subitem.cover.type !== 0" :border="false" :column-num="3">
                    <van-grid-item v-for="(imgitem, imgindex) in subitem.cover.images" :key="imgindex">
                      <van-image lazy-load :src="imgitem" />
                    </van-grid-item>
                  </van-grid>
                  <!-- 文章信息区域 -->
                  <div class="contentbox">
                    <div class="left">
                      <span>{{ subitem.aut_name }}</span>
                      <span>{{ subitem.comm_count }} 条评论</span>
                      <span>{{ subitem.pubdate | timeFilter }}</span>
                    </div>
                    <div @click="openmore(subitem)" class="right">
                      <van-icon name="cross" />
                    </div>
                  </div>
                </template>
              </van-cell>
              <!-- <van-cell class="mycell" v-for="(subitem, subindex) in item.articleList" :key="subindex" :title="subitem.title" /> -->
            </van-list>
          </van-pull-refresh>
        </van-tab>
      </van-tabs>
    </div>
    <!-- 频道操作按钮 -->
    <div class="channelBtn" @click="openPopup">
      <van-icon name="wap-nav" />
    </div>
    <!-- 频道操作面板 -->
    <!-- 将频道列表数据从 index/index 中传入到 channel 中 -->
    <!-- active 是从父组件中传入到子组件中的 -->
    <!-- active 也从子组件中得到数据来修改自己 -->
    <!-- 由于它们是双向绑定的关系：所以我们可以用 v-model 来简化，但是 v-model 的限制条件太多 -->
    <!-- 传入键一定要是 value, 传回的事件名一定要是 input -->
    <!-- 可以使用 .sync 来替换，.sync 与 v-model 的作用是一样的 -->
    <!-- <channel :active="active" @changeactive="v=>active=v" :channelsList="channelsList" ref="channel" /> -->
    <!-- <channel :active="active" @update:active="v=>active=v" :channelsList="channelsList" ref="channel" /> -->
    <!-- 上面的代码可以进行简写：使用 .sync 来进行简写 -->
    <channel :active.sync="active" :channelsList="channelsList" ref="channel" />
    <!-- 更多操作面板 -->
    <more :autid="autid" :artid="artid" @delArt="delArt" ref="more" />
  </div>
</template>

<script>
// 导入得到频道的方法
import { apiGetChannels } from '../../api/channle.js'
// 导入操作 localstorage 的方法
import { localGet } from '../../utils/mylocal.js'
// 导入操作文章的方法
import { apiGetArticleList } from '../../api/article'
// 导入频道操作面板
import channel from './com/channel.vue'
// 导入更多操作面板
import more from './com/more'

// 向 vue 中注册这个指令
import Vue from 'vue'
import { Lazyload } from 'vant'
Vue.use(Lazyload)

export default {
  data () {
    return {
      // 保存频道数据
      channelsList: [],
      // 当前选中的 tab 的下标
      active: 0,
      // 被点击文章的 id
      artid: 0,
      // 作者 id
      autid: 0
    }
  },
  methods: {
    // 当点击更多操作页面中的不感兴趣时，会触发
    delArt (artid) {
      // 将 artid 对应的数据进行删除
      // 去当前频道下的文章列表中去找到数据
      this.channelsList[this.active].articleList.forEach((item, index) => {
        // 判断数据的 id 与传入的 id 是否一样
        if (item.art_id === artid) {
          // 将当前数据删除
          this.channelsList[this.active].articleList.splice(index, 1)
        }
      })
    },
    // 打开更多操作面板
    openmore (subitem) {
      // 打开更多操作面板
      this.$refs.more.show = true
      // 记录前点击文章的 id
      this.artid = subitem.art_id
      // 记录当前文章的作者 id
      this.autid = subitem.aut_id
    },
    // 打开频道操作面板
    openPopup () {
      this.$refs.channel.show = true
    },
    // list 组件上拉触底时执行
    async onLoad () {
      // 得到当前频道
      var currenChannel = this.channelsList[this.active]
      // 1.0 得到当前频道的 id
      var id = currenChannel.id
      // 2.0 根据频道 id 得到当前频道下的数据源
      var res = await apiGetArticleList({
        channelid: id,
        timestamp: Date.now() // 当前时间戳
      })
      // 将返回的数据源保存起来: 这里是使用返回的数据将原本的 articleList 进行覆盖
      // currenChannel.articleList = res.data.data.results
      // 这里不应该是覆盖，应该是拼接
      currenChannel.articleList = [...currenChannel.articleList, ...res.data.data.results]
      // 将当前 list 的加载状态设置为 false
      currenChannel.loading = false
      // 添加一个没有数据的判断
      if (res.data.data.results.length === 0) {
        // 说明没有数据了
        currenChannel.finished = true
      }
      // window.console.log(this.channelsList)
    },
    // 下拉刷新时触发的事件
    onRefresh () {
      // 得到当前频道
      var currenChannel = this.channelsList[this.active]
      // 1.0 清除当前频道下的所有数据
      currenChannel.articleList = []
      currenChannel.loading = false
      currenChannel.finished = false
      currenChannel.isLoading = false
      // 2.0 重新加载数据
      this.onLoad()
      this.onLoad()
    },
    // 得到频道数据
    async getChannels () {
      // 判断用户是否登录：判断
      var token = this.$store.state.userInfo.token
      try {
        if (token) {
          // 说明已经登录
          // 请求服务器接口
          var res = await apiGetChannels()
          // 保存频道数据
          this.channelsList = res.data.data.channels
        } else {
          // 说明未登录：判断 localstorage 中是否存在频道数据
          // 得到 localstorage 中的频道数据
          var localChannel = localGet('channels')
          if (localChannel) {
            // 说明 localstorage 中存在频道数据
            this.channelsList = localChannel
          } else {
            // 说明 localstorage 中不存在频道数据
            // 请求服务器接口
            var resNoLogin = await apiGetChannels()
            // 保存频道数据
            this.channelsList = resNoLogin.data.data.channels
          }
        }
      } catch {
        this.$toast('请求有误')
      }
      // 给频道数据源中再添加一个属性 articleList
      this.addOtherProps()
    },
    // 给频道数据源中添加其它的属性
    addOtherProps () {
      this.channelsList.forEach(item => {
        // // 给频道数据源中的每个成员添加一个新的属性 articleList 属性
        // // var strName = '我是' + item.name + '中的 articleList'
        // item.articleList = [] // 这里的 articleList ：不具备响应式的特点
        // // 还需要动态添加上拉属性，下拉属性，数据加载完毕属性
        // item.isLoading = false // 下拉刷新组件的刷新状态
        // item.loading = false // list 组件中的加载状态
        // item.finished = false // list 组件的数据源加载完毕的状态
        this.$set(item, 'articleList', [])
        this.$set(item, 'isLoading', false)
        this.$set(item, 'loading', false)
        this.$set(item, 'finished', false)
      })
      // window.console.log(this.channelsList)
    }
  },
  // 打开页面时，应该在这里得到频道数据
  mounted () {
    this.getChannels()
  },
  components: {
    channel,
    more
  }
}
</script>

<style lang="less">
.van-nav-bar.van-hairline--bottom {
  background-color: #3e9df8;
  .van-nav-bar__title {
    color: #fff;
  }
}

.index {
  height: 100%;
  overflow: hidden;
  margin-top: 90px;
  margin-bottom: 50px;
  .box {
    position: fixed;
    top: 90px;
    bottom: 50px;
    overflow: scroll;
    width: 100%;
  }
  .van-tabs__wrap.van-hairline--top-bottom {
    position: fixed;
    top: 46px;
    left: 0px;
    width: 90%;
    z-index: 999;
  }
  .channelBtn {
    position: fixed;
    top: 46px;
    right: 0px;
    height: 44px;
    width: 10%;
    text-align: center;
    line-height: 44px;
    background-color: #ccc;
    color: #fff;
  }
  .contentbox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left {
      span {
        margin-right: 10px;
        color: #999;
        font-size: 12px;
      }
    }
    .right {
      border: 1px solid #ccc;
      height: 14px;
      padding: 0 5px;
      line-height: 14px;
      color: #999;
      font-size: 12px;
    }
  }
}
</style>
